<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>14 过滤器</title>
</head>
<body>
  <div id="app">
    <div :sex="sex | sexFilter"></div>
    {{ sex === 1 ? '男' : '女' }} - 
    {{ lesson === 1 ? '一阶段' : lesson === 2 ? '二阶段' : '三阶段' }}

    <h1>过滤器</h1>
    {{ sex | sexFilter }} - {{ lesson | lessonFilter | courseFilter('前端') }}
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  // 全局过滤器
  Vue.filter('sexFilter', function (value) {
    return value == 1 ? '男' : '女'
  })
  const app = new Vue({
    data: {
      sex: 1,
      lesson: 3
    },
    // 局部过滤器
    filters: {
      lessonFilter (value) {
        return value === 1 ? '一阶段' : value === 2 ? '二阶段' : '三阶段'
      },
      courseFilter (value, params) {
        console.log(value, params)
        return params + '-' + value
      }
    }
  }).$mount('#app')
</script>
</html>